<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>级联操作</title>
</head>
<body>
<select id="province">
    <option value="0">选择省份</option>
</select>
<select id="city">
    <option>选择城市</option>
</select>
</body>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
    /*页面被加载就应该取出省份的信息存放到页面中的对应位置，直接异步获取*/
    $.ajax({
        url:"jlServlet",
        type:"GET",
        async:true,
        data_type:"json",
        success:function (data) {
            /*获取到的数据应该是一个省份对象的集合，现在就是要遍历整个集合，取出一个元素就为下拉框添加一个子元素，或者为子元素添加一个兄弟元素*/
        for(let i=0;i<data.length;i++){
            //获取下拉框元素,添加子元素并给子元素添加文本内容
            $("#province").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
           // alert(data[i].name);
        }
        }
    });
    $("#province").change(function () {
        //获取当前选中的省份信息，作为参数传递给后端
        let id = $("#province").val();
        if(id!=0){
            $.ajax({
                url:"cityServlet",//路径
                async:true,//异步确定
                type:"post",
                data:'id='+id,//发送的数据
                data_type:"json",
                success:(function (data) {//成功后触发以下事件
                    /*有一点要注意，在遍历展示之前，要先清空前一个内容变化产生的城市数据，
                    否则城市数据会叠加，就是你选一次，城市整个下拉框就会添加一次元素
                    注意，这里不是单纯的清空，虽然也行，但是会连请选择一起清除掉，
                    咱们讲究点，用一把层级选择器*/
                    $("#city option:gt(0)").remove();//这个方法就表示让city下拉框下的所有option子元素，索引大于0 的元素除外，其余全部自尽（gt > ;lt <）
                    for(let i=0;i<data.length;i++){
                        //获取下拉框元素,添加子元素并给子元素添加文本内容
                        $("#city").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                        // alert(data[i].name);
                    }
                })
            });
        }
    });
</script>
</html>